<!-- 平台规则设置 -->
<template>
  <div class="platRuleSettings">
    <div class="title">让利金额分账规则</div>
    <div style="display:flex;flex-wrap: wrap;">
      <div v-for="(item, index) in list" :key="index" class="formBox">
        <myForm :formConfig="formConfig1" :formData="item" ref="addForm1" :formInline="formInline"
          :labelWidth="labelWidth">
        </myForm>
        <div class="saveDiv">
          <el-button type="primary" size="mini" @click="save(1, item, index)" :loading="item.loading">保存</el-button>
        </div>
      </div>
    </div>

    <div class="title">优惠劵发放规则</div>
    <myForm :formConfig="formConfig2" :formData="form" ref="addForm2" :formInline="formInline" :labelWidth="labelWidth">
    </myForm>
    <div class="saveDiv">
      <el-button type="primary" size="mini" @click="save(2)" :loading="loading1">保存</el-button>
    </div>
  </div>
</template>

<script>
import { getConfig, setCurConfig } from "@/api/platRuleSettings";
export default {
  components: {},
  data() {
    return {
      labelWidth: "250px",
      list: [],
      formInline: false,
      form: {},
      formConfig1: [
        {
          label: "商户让利比例占比（%）",
          prop: "discountRatio",
          type: "input",
          readonly: true,
          placeholder: "请输入发放优惠券金额占比",
          rules: [
            {
              required: true,
              trigger: "blur",
              message: "请输入发放优惠券金额占比"
            }
          ],
          change: value => {
            this.form.discountRatio = value.replace(/[^\d]/g, "");
          }
        },
        {
          label: "发放优惠券金额占比（%）",
          prop: "couponRate",
          type: "input",
          placeholder: "请输入发放优惠券金额占比",
          rules: [
            {
              required: true,
              trigger: "blur",
              message: "请输入发放优惠券金额占比"
            }
          ],
          change: value => {
            this.form.couponRate = value.replace(/[^\d]/g, "");
          }
        },
        {
          label: "推广渠道费用占比（%）",
          prop: "sharePlatform",
          type: "input",
          placeholder: "请输入推广渠道费用占比",
          rules: [
            {
              required: true,
              trigger: "blur",
              message: "请输入推广渠道费用占比"
            }
          ],
          change: value => {
            this.form.sharePlatform = value.replace(/[^\d]/g, "");
          }
        },
        {
          label: "消费者会员所属店铺分成占比（%）",
          prop: "shareTarget",
          type: "input",
          placeholder: "请输入消费者会员所属店铺分成占比",
          rules: [
            {
              required: true,
              trigger: "blur",
              message: "请输入消费者会员所属店铺分成占比"
            }
          ],
          change: value => {
            this.form.shareTarget = value.replace(/[^\d]/g, "");
          }
        },
        {
          label: "推荐店铺分成占比（%）",
          prop: "shareRecommend",
          type: "input",
          placeholder: "请输入推荐店铺分成占比",
          rules: [
            {
              required: true,
              trigger: "blur",
              message: "请输入推荐店铺分成占比"
            }
          ],
          change: value => {
            this.form.shareRecommend = value.replace(/[^\d]/g, "");
          }
        }
      ],
      formConfig2: [
        {
          label: "优惠券有效期（天）",
          prop: "validDays",
          type: "input",
          placeholder: "请输入优惠券有效期",
          rules: [
            { required: true, trigger: "blur", message: "请输入优惠券有效期" }
          ],
          change: value => {
            this.form.validDays = value.replace(/[^\d]/g, "");
          }
        },
        {
          label: "优惠券最大金额（元）",
          prop: "maxAmount",
          type: "input",
          placeholder: "请输入优惠券最大金额",
          rules: [
            {
              required: true,
              trigger: "blur",
              message: "请输入优惠券最大金额"
            }
          ],
          change: value => {
            this.form.maxAmount = value.replace(/[^\d]/g, "");
          }
        }
      ],
      loading1: false,
    };
  },
  created() {
    this.getConfig();
  },
  methods: {
    // 获取当前配置
    getConfig() {
      getConfig().then(res => {
        res.data.forEach((item) => {
          item.loading = false;
        });
        this.list = res.data
        if (this.list.length) {
          this.form = this.list[0];
        }
      });
    },
    // 保存配置
    save(num, item, index) {
      let flag = false;
      if (num == 1) {
        flag = this.$refs.addForm1[index].submitValidate();
      } else {
        this.$refs.addForm2.submitValidate();
      }
      if (flag) {
        if (item != undefined) {
          this.form = { ...item, setType: num };
          item.loading = true
        } else {
          this.loading1 = true;
        }

        setCurConfig(this.form)
          .then(res => {
            if (item != undefined) {
              item.loading = false;
            } else {
              this.loading1 = false;
            }
            this.toast("操作成功", "success");
            this.getConfig();
          })
          .catch(() => {
            if (item != undefined) {
              item.loading = false;
            } else {
              this.loading1 = false;
            }
          });
      }
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-input__inner {
  width: 190px;
}

::v-deep .el-form-item__label {
  font-size: 14px !important;
}

.saveDiv {
  margin-bottom: 30px;
}

.formBox {
  margin-right: 50px;
}

.formBox :last-child {
  margin-right: 0;
}
</style>